@import 'mixins';

$PI: 3.141592674;
$activity-indicator-spinner-count : 12;

@include b(activity-indicator) {
  display: inline-block;
  position: relative;
  transform: rotate(-90deg);
  @include activity-indicator-size(var(--activity-indicator-size-md));

  @include e(path) {
    stroke: var(--activity-indicator-path-color);
  }

  @include e(line) {
    stroke-dasharray: 100 * $PI;
    stroke: var(--theme-primary);
  }

  /* sizes */
  @include m(lg) {
    @include activity-indicator-size(var(--activity-indicator-size-lg));
  }

  @include m(circular) {
    display: inline-block;

    svg {
      vertical-align: top;
      @include animation(rotate360, 2s linear infinite);
    }

    circle {
      stroke-linecap: round;
      stroke: var(--theme-primary);
      @include animation(rotate-circular, 1.5s ease-in-out infinite);
    }
  }

  @include m(spinner) {
    @include animation(rotate360, .8s linear infinite);

    animation-timing-function: steps($activity-indicator-spinner-count);

    @for $i from 1 through $activity-indicator-spinner-count {
      div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &:nth-of-type(#{$i}) {
          transform: rotate($i * 30deg);
          opacity: 1 - (0.75 / $activity-indicator-spinner-count) * ($i - 1);
        }

        &::before {
          content: '';
          display: block;
          width: 2px;
          height: 25%;
          margin: 0 auto;
          background-color: var(--activity-indicator-spinner-color);
          border-radius: 40%;
        }
      }
    }
  }

  @include keyframes(rotate-circular) {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 120, 200;
      stroke-dashoffset: -60;
    }

    100% {
      stroke-dasharray: 120, 200;
      stroke-dashoffset: -180;
    }
  }

  @include keyframes(rotate360) {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }
}
